<template>
    <view class="bg-content">
        <div style="padding: 10px; background: white; margin-bottom: 10px;"
             v-for="(tbGoodsComment) of tbGoodsCommentList" :key="tbGoodsComment.id">

            <div class="table" style="vertical-align: middle;">
                <div class="tr">
                    <div class="td" style="width: 35px;">
                        <image style="width: 35px; height: 35px; display: inline-block;"
                             :src="tbGoodsComment.tbOrderGoods.image ? tbGoodsComment.tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub1-tabs/static/default-image/goods.jpg'"
                             alt="图片加载失败"/>
                    </div>
                    <div class="td" style="padding-left: 10px;">
                        <div>
                            {{tbGoodsComment.tbOrderGoods.specName}}
                            <label v-if="tbGoodsComment.tbOrderGoods.colorName">;{{tbGoodsComment.tbOrderGoods.colorName}}</label>
                        </div>
                        <div style="display: flex;">
                            <div style="width: 65px;">
                                <div style="margin-right: 5px;">描述相符</div>
                            </div>
                            <div>
                                <u-rate active-icon="heart-fill" inactive-icon="heart" :key="tbGoodsComment.id" :disabled="true"
                                        :value="tbGoodsComment.grade" min-count="1"></u-rate>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td" style="width: 50px; padding-top: 4px;">
                        评价
                    </div>
                    <div class="td" style="background-color: #eeeeee;">
                        <u-input :key="tbGoodsComment.id" v-model="tbGoodsComment.content" type="textarea" height="40" :border="true" :disabled="true"
                                 placeholder="宝贝满足你的期待吗？说说它们的优点和美中不足的地方吧"/>
                    </div>
                </div>
                <div class="tr" style="margin-top: 10px;">
                    <div class="td">
                        <div class="table">
                            <div class="tr">
                                <div class="td">
                                    {{tbGoodsComment.isAnonymous ? '匿名评价' : ''}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="padding-top: 50px;" v-if="!tbGoodsCommentList.length">
            <u-empty text="列表为空" mode="list"></u-empty>
        </div>

        <div style="padding-bottom: 62px;" v-if="tbGoodsCommentList.length">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>
    </view>
</template>

<script>

    import {TbGoodsCommentService} from "@/dev/services/tb-goods-comment.service";

    export default {
        data() {
            return {
                tbGoodsCommentList: []
            }
        },
        onLoad(options) {
            const _self = this
            this.doRefresh(this.tbGoodsCommentList);
        },
        methods: {
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbGoodsCommentService().findTableTbGoodsCommentList({
                    pagination: _self.pagination,
                    data: {
                        userId: this.globalVariable.userInfo.id,
                        parentId: 'root',
                        orderBy: 'create_time desc'
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);
                    _self.tbGoodsCommentList = [..._self.tbGoodsCommentList, ...result.list];
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
